﻿<template>
  <div v-if = 'showMDJson' v-loading = 'loading' element-loading-text = '数据加载中...'>
    <link href = '/static/editorJson/all.min.css' rel = 'stylesheet'>
    <link href = '/static/editorJson/jsoneditor.min.css' rel = 'stylesheet'>
    <div :id = 'editId' class = 'editarea json_editor_edit' v-if = '!disabled'></div>
    <el-input v-else disabled type = 'textarea' class = 'showJson_show' autosize v-model = 'currentValue' :id = 'showId'></el-input>
  </div>
</template>

<script>
import scriptjs from 'scriptjs'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认值
    defaultValue: {
      type: String
    },
    // 初始化的状态
    showMDJson: {
      type: Boolean
    },
    editId: {
      type: String,
      default: 'json_editor'
    },
    showId: {
      type: String,
      default: 'showJson'
    },
    updateJson: { // 更新数据的判断
      type: Boolean
    }
  },
  data () {
    return {
      currentValue: this.defaultValue || null,
      editorJson: null,
      loading: false
    }
  },
  mounted () {
    this.init_page()
  },
  watch: {
    showMDJson: {
      deep: true,
      handler (val) {
        if (val) {
          this.init_page()
        } else {
          if (this.editorJson) {
            this.editorJson.destroy()
            this.editorJson = null
          }
        }
      }
    },
    updateJson: { // 更新数据
      deep: true,
      handler (val) {
        if (this.editorJson) {
          this.editorJson.destroy()
          this.editorJson = null
        }
        this.init_page()
      }
    }
  },
  methods: {
    fetchScript: function (url) {
      return new Promise((resolve) => {
        scriptjs(url, () => {
          resolve()
        })
      })
    },
    // 获取值
    getMdValue () {
      let val = this.editorJson.getText()
      // JSON格式错误时,会出现一个className为ace_error的元素
      let errorLength = document.getElementsByClassName('ace_error').length
      if (errorLength) {
        this.$message({
          message: '请检查您输入的JSON格式是否正确',
          type: 'warning',
          duration: '2000'
        })
        this.$emit('update:defaultValue', 'JsonError')
      } else {
        val = val ? encodeURIComponent(val) : ''
        this.$emit('update:defaultValue', val)
      }
    },
    // 初始化页面的方法
    init_page: async function () {
      let _self = this
      _self.editorJson = null
      _self.currentValue = _self.defaultValue ? decodeURIComponent(_self.defaultValue) : ''
      if (this.disabled) {
        return
      }
      _self.loading = true
      await this.fetchScript('/static/editorJson/jsoneditor.min.js')
      _self.$nextTick(() => {
        _self.editorJson = new window.JSONEditor(document.getElementById(_self.editId), { mode: 'code' })
        setTimeout(() => {
          _self.editorJson.setText(_self.currentValue)
          _self.loading = false
        }, 1000)
        document.getElementsByClassName('jsoneditor-format')[0].setAttribute('title', '格式化')
        document.getElementsByClassName('jsoneditor-compact')[0].setAttribute('title', '序列化')
        document.getElementsByClassName('jsoneditor-repair')[0].setAttribute('title', '修正json格式')
      })
    }
  }
}
</script>

<style lang = 'scss'>
#json_editor,
.json_editor_edit {
  height: 660px;
  .jsoneditor-sort,
  .jsoneditor-transform,
  .jsoneditor-poweredBy {
    display: none !important;
  }
  .jsoneditor-menu {
    button {
      opacity: 1;
    }
  }
}
#showJson,
.showJson_show {
  max-height: 700px;
}
@media (max-width:1367px) {
  #json_editor,
  .json_editor_edit {
    height: 400px;
  }
  #showJson,
  .showJson_show {
    max-height: 450px;
  }
}
</style>
